<template>
  <view>
   <u-navbar
     :is-back="false"
     back-icon-color="#f6f6f6"
     title="首页"
     title-color="#f6f6f6"
     :background="navBackground"
   ></u-navbar>
    <view>
      <!--轮播图部分-->
      <swiper class="swiper-box" autoplay="true" interval="3000">
        <swiper-item v-for="(item, index) in navImgList" :key="index">
          <view
            @click="navToDetail(item.cloth_id)"
            style="width: 100%; height: 100%"
          >
            <image
              class="swiper-img"
              mode="heightFix"
              :src="item.cloth_preImg"
            ></image>
          </view>
        </swiper-item>
      </swiper>
      <view class="service-box">
        <view class="service-title">功能区域</view>
        <u-grid :border="false" col="4">
          <u-grid-item
            v-for="(item, index) in funList"
            @click="navToPage(item.url)"
            backgroundColor="transparent"
            :key="index"
          >
            <view class="item-cell">
              <view class="tui-grid-icon">
                <img :src="item.icon" />
              </view>
              <view class="tui-grid-label">{{ item.label }}</view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      navBackground: app.globalData.navBackground,
      navImgList: [],
      funList: [],
      current: 3,
    };
  },
  onLoad() {
    uni.request({
      url: app.globalData.baseUrl + '/index/getSwiperList',
      method: 'GET',
      success: (res) => {
        let result = res.data;
        if (!result.code) {
          this.navImgList = result.list;
        } else {
          app.showToast('数据获取失败，请稍后再试~');
        }
      },
    });
    //请求获取当前开发出来的功能
    uni.request({
      url: app.globalData.baseUrl + '/index/getToolList',
      method: 'GET',
      success: (res) => {
        let result = res.data;
        if (!result.code) {
          this.funList = result.list;
        }
      },
      fail: (err) => {
        console.log('输出返回错误信息：', err);
      },
    });
    //获取用户缓存信息
    uni.getStorage({
      key: 'globalData',
      success: (res) => {
        app.globalData = res.data;
      },
      fail: (err) => {
        console.log('获取缓存失败', err.errMsg);
      },
    });
  },
  methods: {
    navToDetail(id) {
      uni.navigateTo({
        url: '/pages/cloth/details?id=' + id,
      });
    },
    navToPage: function (url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.swiper-box {
  height: 600rpx;
  width: 100%;
  background-color: #dbe7f5;
}

.swiper-img {
  width: 520rpx;
  height: 100%;
  display: block;
  margin: 0px auto;
}

.news-item {
  position: relative;
  width: 100%;
}

.news-img {
  width: 100%;
}

.news-title {
  z-index: 2;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: red;
}

.service-title {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 36rpx;
  font-weight: bold;
  background-color: #e1c6ef;
  color: #fff;
  padding-left: 15rpx;
}

.tui-grid-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tui-grid-icon img {
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
}

.tui-grid-label {
  font-size: 28rpx;
  text-align: center;
  margin-top: 12rpx;
}
</style>
